import { NText } from 'naive-ui';
import { isFunction } from 'lodash-es';

import type { TableFieldProps } from '@/components/table/src/base-table-field';
import { BaseTableField } from '@/components/table/src/base-table-field';
import { useColorType } from '@/components/table/src/hooks/use-color-type';

export const TextTableField = defineComponent<TableFieldProps>({
  name: 'TextTableField',
  extends: BaseTableField,
  setup(props) {
    const text = computed(() => {
      const value = props.rowData[props.field.key] ?? props.field.defaultValue;
      if (isFunction(props.field.formatter)) {
        return props.field.formatter(value, props.rowData);
      }
      return value;
    });
    const options = computed(() => props.field.textOptions);
    const type = computed(() => {
      return useColorType(text.value, props.rowData, options.value?.colorType);
    });

    return () =>
      text.value
        ? (
            <NText italic={options.value?.italic} strong={options.value?.bold} type={type.value}>
              {text.value}
            </NText>
          )
        : '-';
  },
});
